<script lang="ts" setup>
import "@/utils/rem"
import { ref, reactive, toRefs } from "vue"
const DATA = reactive<any>({
  formData: {}
})
document.title = "简历投递"

const { formData } = toRefs(DATA)
/**性别 */
const columns = [
  { text: "男", value: "男" },
  { text: "女", value: "女" }
]
const pickerValue = ref<any>([])
const showPicker = ref(false)
const onConfirm = ({ selectedValues, selectedOptions }: { selectedValues: any[]; selectedOptions: any[] }) => {
  formData.value.sex = selectedOptions[0]?.text
  pickerValue.value = selectedValues
  showPicker.value = false
}
/**出生年月 */
const minDate = new Date(1980, 0, 1)
const maxDate = new Date(2035, 12, 31)
const showPickerTime = ref(false)
const pickerValueTime = ref<any>([])
const onConfirmTime = ({ selectedValues }: { selectedValues: any[] }) => {
  formData.value.birthday = selectedValues.join("-")
  pickerValueTime.value = selectedValues
  showPickerTime.value = false
}
/**政治面貌 */
const columnsZ = [
  { text: "群众", value: "群众" },
  { text: "共青团员", value: "共青团员" },
  { text: "党员", value: "党员" }
]
const pickerValueZ = ref<any>([])
const showPickerZ = ref(false)
const onConfirmZ = ({ selectedValues, selectedOptions }: { selectedValues: any[]; selectedOptions: any[] }) => {
  formData.value.politics = selectedOptions[0]?.text
  pickerValueZ.value = selectedValues
  showPickerZ.value = false
}
/**婚姻状况 */
const columnsM = [
  { text: "未婚", value: "未婚" },
  { text: "已婚", value: "已婚" }
]
const pickerValueM = ref<any>([])
const showPickerM = ref(false)
const onConfirmM = ({ selectedValues, selectedOptions }: { selectedValues: any[]; selectedOptions: any[] }) => {
  formData.value.marriage = selectedOptions[0]?.text
  pickerValueM.value = selectedValues
  showPickerM.value = false
}
/**面试岗位i */
const columnsG = [
  { text: "质检", value: "质检" },
  { text: "维系", value: "维系" },
  { text: "售前", value: "售前" },
  { text: "售后", value: "售后" },
  { text: "商务", value: "商务" },
  { text: "文员", value: "文员" },
  { text: "话务员", value: "话务员" },
  { text: "打字客服", value: "打字客服" },
  { text: "图文编辑", value: "图文编辑" },
  { text: "视频剪辑", value: "视频剪辑" },
  { text: "带货主播", value: "带货主播" },
  { text: "电商运营", value: "电商运营" },
  { text: "新媒体运营", value: "新媒体运营" },
  { text: "数据分析", value: "数据分析" },
  { text: "前端开发 ", value: "前端开发" },
  { text: "后端开发", value: "后端开发" },
  { text: "财务专员", value: "财务专员" },
  { text: "财务助理", value: "财务助理" },
  { text: "总经理助理", value: "总经理助理" },
  { text: "管培生", value: "管培生" }
]
const pickerValueG = ref<any>([])
const showPickerG = ref(false)
const onConfirmG = ({ selectedValues, selectedOptions }: { selectedValues: any[]; selectedOptions: any[] }) => {
  formData.value.works = selectedOptions[0]?.text
  pickerValueG.value = selectedValues
  showPickerG.value = false
}
/**工作起止时间 */
const showDate = ref(false)
const onConfirmDate = (value: any) => {
  console.log(value)
  if (
    new Date(formData.value.jobStartDate.join("/")).getTime() > new Date(formData.value.jobEndDate.join("/")).getTime()
  ) {
    showToast("结束日期不能早于开始时间")
    return
  }
  formData.value.jobDate = `${formData.value.jobStartDate.join("/")} —${formData.value.jobEndDate.join("/")}`
  showDate.value = false
}
const onCancelDate = () => {
  showDate.value = false
}
/**学历 */
const columnsX = [
  { text: "高中", value: "高中" },
  { text: "专科", value: "专科" },
  { text: "本科", value: "本科" },
  { text: "硕士", value: "硕士" },
  { text: "博士", value: "博士" }
]
const pickerValueX = ref<any>([])
const showPickerX = ref(false)
const onConfirmX = ({ selectedValues, selectedOptions }: { selectedValues: any[]; selectedOptions: any[] }) => {
  formData.value.education = selectedOptions[0]?.text
  pickerValueX.value = selectedValues
  showPickerX.value = false
}
/**在校时间 */
const showDateZX = ref(false)
const onConfirmDateZX = (value: any) => {
  console.log(value)
  if (new Date(formData.value.startDate.join("/")).getTime() > new Date(formData.value.endDate.join("/")).getTime()) {
    showToast("结束日期不能早于开始时间")
    return
  }
  formData.value.schoolDate = `${formData.value.startDate.join("/")} —${formData.value.endDate.join("/")}`
  showDateZX.value = false
}
const onCancelDateZX = () => {
  showDateZX.value = false
}
/**头像上传 */
import { uploadCidImageList } from "@/api/order"
import { postMsg } from "@/api/hr"
import { showToast } from "vant"

const fileList = ref<any>([])
/**提交 */
import { useRouter } from "vue-router"
const router = useRouter()
const timer = ref<any>(null)
const show = ref<boolean>(false)
const onSubmit = async () => {
  show.value = true
  const fileData = new FormData()
  fileList.value.forEach((file: any) => {
    fileData.append("file", file.file)
    fileData.append("name", formData.value.name)
  })
  if (fileList.value.length > 0) {
    await uploadCidImageList(fileData)
      .then((res: any) => {
        if (res.code == 200) {
          formData.value.img = res.data.split("/image/")[1]
        }
      })
      .catch(() => {})
  }
  console.log(formData.value)
  await postMsg({
    ...formData.value,
    jobStartDate: formData.value.jobStartDate ? formData.value.jobStartDate.join("-") : "",
    jobEndDate: formData.value.jobEndDate ? formData.value.jobEndDate.join("-") : "",
    startDate: formData.value.startDate ? formData.value.startDate.join("-") : "",
    endDate: formData.value.endDate ? formData.value.endDate.join("-") : ""
  })
    .then((res: any) => {
      if (res.code == 200) {
        if (timer.value) {
          clearTimeout(timer.value)
        }

        timer.value = setTimeout(() => {
          show.value = false
          formData.value = {}
          showToast("谢谢您的简历投递,期待未来的你！")
          router.push(`/hr/index`)
        }, 1500)
      }
    })
    .catch(() => {
      showToast({ type: "fail", message: "提交失败" })
      show.value = false
    })
}
</script>
<template>
  <div style="background-color: #fff; width: 7.5rem; margin: 0 auto; position: relative" ref="root">
    <van-form @submit="onSubmit">
      <van-cell-group inset style="padding-bottom: 1rem">
        <van-field
          label-align="top"
          v-model="formData.name"
          name="姓名"
          label="姓名"
          size="small"
          required
          :rules="[{ required: true, message: '请填写姓名' }]"
          placeholder="请填写身份证姓名(已加密)"
          style="width: 60%"
        />
        <van-field
          is-link
          readonly
          label-align="top"
          v-model="formData.sex"
          name="性别"
          label="性别"
          size="small"
          placeholder="请选择性别"
          required
          :rules="[{ required: true, message: '请选择性别' }]"
          @click="showPicker = true"
          style="width: 60%"
        />
        <van-popup v-model:show="showPicker" destroy-on-close position="bottom">
          <van-picker :columns="columns" :model-value="pickerValue" @confirm="onConfirm" @cancel="showPicker = false" />
        </van-popup>
        <van-field class="nb" name="img" style="position: absolute; top: 10px; right: 10px; width: 30%; z-index: 10">
          <template #input>
            <van-uploader reupload max-count="1" v-model="fileList" />
          </template>
        </van-field>
        <van-field
          label-align="top"
          v-model="formData.age"
          name="年龄"
          label="年龄"
          size="small"
          placeholder="请填写"
          required
          :rules="[{ required: true, message: '请填写年龄' }]"
        />
        <van-field
          is-link
          readonly
          label-align="top"
          v-model="formData.birthday"
          name="datePicker"
          label="出生年月"
          placeholder="点击选择时间"
          required
          :rules="[{ required: true, message: '请选择出生年月' }]"
          @click="showPickerTime = true"
        />
        <van-popup v-model:show="showPickerTime" destroy-on-close position="bottom">
          <van-date-picker
            :min-date="minDate"
            :max-date="maxDate"
            :model-value="pickerValueTime"
            @confirm="onConfirmTime"
            @cancel="showPickerTime = false"
          />
        </van-popup>
        <van-field
          is-link
          readonly
          label-align="top"
          v-model="formData.politics"
          name="政治面貌"
          label="政治面貌"
          size="small"
          placeholder="请选择政治面貌"
          @click="showPickerZ = true"
        />
        <van-popup v-model:show="showPickerZ" destroy-on-close position="bottom">
          <van-picker
            :columns="columnsZ"
            :model-value="pickerValueZ"
            @confirm="onConfirmZ"
            @cancel="showPickerZ = false"
          />
        </van-popup>
        <van-field
          label-align="top"
          v-model="formData.register"
          name="户籍"
          label="户籍"
          size="small"
          placeholder="请填写户籍"
        />
        <van-field
          label-align="top"
          v-model="formData.place"
          name="现居住地"
          label="现居住地"
          size="small"
          placeholder="请填写现居住地"
        />
        <van-field
          readonly
          is-link
          label-align="top"
          v-model="formData.marriage"
          name="婚姻状况"
          label="婚姻状况"
          size="small"
          placeholder="请填写婚姻状况"
          @click="showPickerM = true"
        />
        <van-popup v-model:show="showPickerM" destroy-on-close position="bottom">
          <van-picker
            :columns="columnsM"
            :model-value="pickerValueM"
            @confirm="onConfirmM"
            @cancel="showPickerM = false"
          />
        </van-popup>
        <van-field
          label-align="top"
          type="tel"
          v-model="formData.phone"
          name="联系方式"
          label="联系方式"
          size="small"
          placeholder="请填写联系方式"
          maxlength="11"
          required
          :rules="[{ required: true, message: '请填写联系方式' }]"
        />
        <van-field
          readonly
          is-link
          label-align="top"
          v-model="formData.works"
          name="面试岗位"
          label="面试岗位"
          size="small"
          placeholder="请选择"
          @click="showPickerG = true"
          required
          :rules="[{ required: true, message: '请选择面试岗位' }]"
        />
        <van-popup v-model:show="showPickerG" destroy-on-close position="bottom">
          <van-picker
            :columns="columnsG"
            :model-value="pickerValueG"
            @confirm="onConfirmG"
            @cancel="showPickerG = false"
          />
        </van-popup>
        <van-field
          label-align="top"
          v-model="formData.hopeSalary"
          name="期望薪资"
          label="期望薪资"
          size="small"
          placeholder="请填写期望薪资"
        />
        <span style="font-weight: 700; font-size: 14px; margin-left: 16px; vertical-align: middle; color: #5f5f5f"
          >工作经验</span
        >
        <van-field
          readonly
          is-link
          label-align="top"
          v-model="formData.jobDate"
          name="起止时间"
          label="起止时间"
          size="small"
          placeholder="请选择开始时间和结束时间"
          @click="showDate = true"
        />
        <van-popup v-model:show="showDate" destroy-on-close position="bottom">
          <van-picker-group
            title="起止时间"
            :tabs="['开始日期', '结束日期']"
            @confirm="onConfirmDate"
            @cancel="onCancelDate"
          >
            <van-date-picker v-model="formData.jobStartDate" :min-date="minDate" :max-date="maxDate" />
            <van-date-picker v-model="formData.jobEndDate" :min-date="minDate" :max-date="maxDate" />
          </van-picker-group>
        </van-popup>
        <van-field
          label-align="top"
          v-model="formData.jobCompany"
          name="工作单位"
          label="工作单位"
          size="small"
          placeholder="请填写工作单位"
        />
        <van-field
          label-align="top"
          v-model="formData.jobWorks"
          name="职务与待遇"
          label="职务与待遇"
          size="small"
          placeholder="请填写职务与待遇"
          rows="2"
          autosize
          type="textarea"
          maxlength="200"
          show-word-limit
        />
        <van-field
          label-align="top"
          v-model="formData.jobDimission"
          name="离职原因"
          label="离职原因"
          size="small"
          placeholder="请填写离职原因"
          rows="2"
          autosize
          type="textarea"
          maxlength="100"
          show-word-limit
        />
        <span style="font-weight: 700; font-size: 14px; margin-left: 16px; vertical-align: middle; color: #5f5f5f"
          >教育经历</span
        >
        <van-field
          is-link
          readonly
          label-align="top"
          v-model="formData.education"
          name="学历"
          label="学历"
          size="small"
          placeholder="请选择学历"
          @click="showPickerX = true"
          required
          :rules="[{ required: true, message: '请选择学历' }]"
        />
        <van-popup v-model:show="showPickerX" destroy-on-close position="bottom">
          <van-picker
            :columns="columnsX"
            :model-value="pickerValueX"
            @confirm="onConfirmX"
            @cancel="showPickerX = false"
          />
        </van-popup>
        <van-field
          label-align="top"
          v-model="formData.schoolName"
          name="学校名称"
          label="学校名称"
          size="small"
          placeholder="请填写学校名称"
          required
          :rules="[{ required: true, message: '请填写学校名称' }]"
        />
        <van-field
          label-align="top"
          v-model="formData.specialty"
          name="所学专业"
          label="所学专业"
          size="small"
          placeholder="请填写所学专业"
        />
        <van-field
          readonly
          is-link
          label-align="top"
          v-model="formData.schoolDate"
          name="在校时间"
          label="在校时间"
          size="small"
          placeholder="请选择"
          @click="showDateZX = true"
        />
        <van-popup v-model:show="showDateZX" destroy-on-close position="bottom">
          <van-picker-group
            title="在校时间"
            :tabs="['开始日期', '结束日期']"
            @confirm="onConfirmDateZX"
            @cancel="onCancelDateZX"
          >
            <van-date-picker v-model="formData.startDate" :min-date="minDate" :max-date="maxDate" />
            <van-date-picker v-model="formData.endDate" :min-date="minDate" :max-date="maxDate" />
          </van-picker-group>
        </van-popup>
        <van-field
          label-align="top"
          v-model="formData.certificate"
          name="资格证书"
          label="资格证书"
          size="small"
          placeholder="请填写资格证书"
        />
        <van-field
          label-align="top"
          v-model="formData.advantage"
          name="个人优势"
          label="个人优势"
          size="small"
          placeholder="请填写个人优势"
          rows="2"
          autosize
          type="textarea"
          maxlength="200"
          show-word-limit
        />
        <span style="font-size: 14px; margin-left: 16px; vertical-align: middle; color: #979797"
          >请将这些选项按照你认为的重要顺序排列</span
        >
        <P style="font-size: 14px; margin-left: 16px; vertical-align: middle; color: #979797"
          >A无责底薪 B提成奖金 C五险一金 D工作氛围 E办公环境</P
        >
        <P style="font-size: 14px; margin-left: 16px; vertical-align: middle; color: #979797"
          >F晋升空间 G主管工作方式 H能力提升 I行业前景</P
        >
        <P style="font-size: 14px; margin-left: 16px; vertical-align: middle; color: #979797">J公司资历与发展</P>
        <van-field
          label-align="top"
          v-model="formData.orderBys"
          size="small"
          placeholder="请填写你认为的重要顺序排列"
          rows="2"
          autosize
          type="textarea"
          maxlength="10"
          show-word-limit
          style="border: 1px solid #ebedf0"
        />
      </van-cell-group>
      <van-button
        style="position: fixed; bottom: 0; border-radius: 0; width: 7.5rem"
        type="primary"
        block
        native-type="submit"
        >提交</van-button
      >
    </van-form>
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper" @click.stop>
        <div class="block">
          <van-image width="200" height="200" src="http://fansitexitong.cn/images/post.gif" />
        </div>
      </div>
    </van-overlay>
  </div>
</template>
<style lang="scss" scoped>
:deep(.nb:after) {
  border: 0;
}

:deep(.van-uploader__upload) {
  width: 1.6rem;
  height: 2rem;
}
:deep(.van-uploader__preview-image) {
  width: 1.6rem;
  height: 2rem;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
:deep(.van-field__label) {
  color: #5f5f5f;
}
:deep(.van-field__control::-webkit-input-placeholder) {
  color: #aeaeae;
}
:deep(.van-overlay) {
  z-index: 999 !important;
}
</style>
